<template>
  <div class="container">
    <div class="background">
      <img class="top-logo" src="@/assets/kll/agent.png" alt="" />
      <div class="bg">
        <div class="panel-top">
          <div class="title">
            ///<span>申请人资格</span>///
          </div>
          <div class="content content-1">
            <p>
              <span class="dot"></span
              ><span class="text">
                凡年满18周岁的具有我国国籍的合法公民，都可以申 请代理
              </span>
            </p>
            <p>
              <span class="dot"></span>
              <span class="text">
                具备从事行业所需的相应的基本知识和技能
              </span>
            </p>
            <p>
              <span class="dot"></span
              ><span class="text">
                良好的精神面貌，爱岗敬业，具有良好的服务意
                识、团队意识和创新意识
              </span>
            </p>
            <p>
              <span class="dot"></span>
              <span class="text"
                >热爱环保事业，有坚持为环保事业发展做贡献的 决心</span
              >
            </p>
          </div>
        </div>
        <div class="divider">
          <div class="dashed"></div>
        </div>
        <div class="panel-top" style="border-radius:0;">
          <div class="title">
            ///<span>代理所享有的权益</span>///
          </div>
          <div class="content content-2">
            1、享有区域内对所有推广员的管理费
            <br />
            2、享有区域内终端所下订单的利润提成
            <br />
            3、推荐社区服务商或区县服务商享有相应金额的推荐奖励
            <br />
            4、社区代理即乡、镇、街道等代理享有公司派单；县、市、区代理享有公司20%的产品差价
            <br />
            5、县、市、区代理有资格参加评选优秀代理，并享受当季度分红。
            <br />
            6、有资格优先购买公司的原始股。
          </div>
        </div>
        <div class="divider">
          <div class="dashed"></div>
        </div>
        <div class="panel-bottom">
          <div class="input-cell">
            <div class="left"><span>*</span>姓名</div>
            <input v-model="name" type="text" />
          </div>
          <div class="input-cell">
            <div class="left"><span>*</span>身份证号</div>
            <input v-model="id_number" type="tel" />
          </div>
          <div class="input-cell">
            <div class="left"><span>*</span>联系方式</div>
            <input v-model="mobile" type="text" />
          </div>
          <div class="input-cell">
            <div class="left"><span>*</span>地址</div>
            <input v-model="address" type="text" />
          </div>
          <div class="input-cell">
            <div class="left"><span>*</span>申请级别</div>
            <yd-radio-group v-model="level">
              <yd-radio val="1">社区服务站</yd-radio>
              <yd-radio val="2">区县合伙人</yd-radio>
            </yd-radio-group>
          </div>
          <div @click="showAddrSelect = true" class="input-cell">
            <div class="left"><span>*</span>服务范围</div>
            <input readonly v-model="addrStr" type="text" />
          </div>
          <div class="input-cell">
            <div class="left"><span></span>邀请码</div>
            <input v-model="code" type="text" />
          </div>
        </div>
        <div @click="submit" class="btn">立即申请</div>
      </div>
    </div>
    <yd-cityselect v-model="showAddrSelect" :callback="result" :items="district"
      >{{ addrStr }}
    </yd-cityselect>
  </div>
</template>

<script>
import { agentApply, getInviteCode } from "@/api/mall";
import District from "@/utils/citys.js";
export default {
  data() {
    return {
      district: District,
      name: null,
      id_number: null,
      mobile: null,
      address: null,
      addrStr: null,
      addrId: null,
      code: null,
      level: "1",
      showAddrSelect: false
    };
  },

  computed: {},

  watch: {},

  methods: {
    result(ret) {
      this.addrStr = ret.itemName1 + " " + ret.itemName2 + " " + ret.itemName3;
      this.addrId =
        ret.itemValue1 + "," + ret.itemValue2 + "," + ret.itemValue3;
    },
    submit() {
      if (!this.name) {
        this.$dialog.toast({
          mes: "请填写姓名",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.id_number) {
        this.$dialog.toast({
          mes: "请填写身份证号",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.mobile) {
        this.$dialog.toast({
          mes: "请填写手机号",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.address) {
        this.$dialog.toast({
          mes: "请填写详细地址",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.addrId) {
        this.$dialog.toast({
          mes: "请选择服务范围",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      agentApply({
        realname: this.name,
        identity: this.id_number,
        province: this.addrId.split(",")[0],
        city: this.addrId.split(",")[1],
        prefecture: this.addrId.split(",")[2],
        street: this.address,
        agent: this.level,
        code: this.code,
        mobile: this.mobile
      }).then(res => {
        if (res.status === 200) {
          this.$dialog.toast({
            mes: "提交成功，请耐心等待审核",
            icon: "success"
          });
          this.$router.go(-1);
        }
      });
    },
    onSelect(item) {
      this.show = false;
      this.type = item;
    }
  },
  created() {
    getInviteCode().then(res => {
      if (res.status === 200) {
        this.code = res.data.data.code;
      }
    });
  },
  components: {}
};
</script>
<style lang="less">
.yd-radio {
  font-size: 1rem !important;
  .yd-radio-icon {
    width: 0.8rem !important;
    height: 0.8rem !important;
    i {
      width: 0.4rem !important;
      height: 0.4rem !important;
    }
  }
  .yd-radio-text {
    font-size: 0.54rem;
  }
}
</style>
<style lang="less" scoped>
.container {
  position: relative;
  background: #fff;
  .title {
    text-align: center;
    font-size: 0.72rem;
    color: #86776d;
    padding: 0.7rem;
    letter-spacing: 0.1rem;
    span {
      font-weight: bold;
      font-size: 0.68rem;
      margin: 0 0.8rem;
    }
  }
  .background {
    .top-logo {
      width: 100%;
      display: block;
    }
    .bg {
      padding: 0 3.2%;
      transform: translateY(-2rem);
      .divider {
        height: 0.36rem;
        border-top: 0.02rem solid rgba(189, 73, 49, 0.3);
        border-bottom: 0.02rem solid rgba(189, 73, 49, 0.3);
        background: #fff;
        padding: 0.16rem;
        .dashed {
          height: 0.02rem;
          border-bottom: 0.02rem dashed rgba(189, 73, 49, 0.3);
        }
      }
      .panel-top {
        background: #fff;
        border-top-left-radius: 0.32rem;
        border-top-right-radius: 0.32rem;
        padding: 0 0.6rem 0.6rem;
        position: relative;
        .content {
          color: #86776d;
          font-size: 0.56rem;
          // line-height: 0.12rem;
          p {
            display: flex;
            margin: 1rem 0;
            .dot {
              width: 0.16rem;
              height: 0.16rem;
              background-color: #997356;
              border-radius: 50%;
              margin: 0 0.2rem;
              position: relative;
              transform: translateY(0.35rem);
            }
            .text {
              width: calc(100% - 0.56rem);
            }
          }
        }
        .content-1 {
          padding: 0 3.2%;
          background: rgba(56, 150, 255, 0.04);
          border: 0.04rem solid rgba(0, 0, 0, 0.04);
          border-radius: 0.24rem;
        }
        .content-2 {
          padding: 0.48rem 3.2%;
          background: rgba(255, 253, 241, 1);
          border: 0.04rem solid rgba(235, 222, 205, 1);
          border-radius: 0.24rem;
          line-height: 1rem;
          font-size: 0.48rem;
        }
      }
      .panel-bottom {
        background: #fff;
        border-bottom-left-radius: 0.32rem;
        border-bottom-right-radius: 0.32rem;
        padding: 0 0.6rem 0.6rem;
        .input-cell {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 1.7rem;
          .left {
            font-size: 0.64rem;
            color: #666;
            span {
              color: #fb5b5b;
            }
            .tip {
              font-size: 0.64rem;
              color: #fb5b5b;
            }
          }
          input {
            background: rgba(245, 245, 245, 1);
            border-radius: 0.08rem;
            border: 0.02rem solid rgba(233, 233, 233, 1);
            font-size: 0.56rem;
            color: #666;
            padding: 0.2rem 0.4rem;
            width: 8rem;
          }
        }
        .user-info {
          border-bottom: 0.02rem dashed rgba(253, 179, 70, 1);
          padding-bottom: 0.48rem;
        }
      }
      .btn {
        height: 1.44rem;
        background: rgba(51, 147, 255, 1);
        text-align: center;
        line-height: 1.44rem;
        color: #fffdf1;
        font-size: 0.64rem;
        margin-top: 0.96rem;
        border-radius: 0.12rem;
      }
    }
  }
  .add-btn {
    margin-right: 0.24rem;
    margin-bottom: 0.24rem;
    height: 3.8rem;
    width: 3.8rem;
    background: rgba(238, 238, 238, 1);
    text-align: center;
    padding-top: 1.4rem;
    img {
      width: 1.04rem;
    }
    .text {
      font-size: 0.56rem;
      color: #444444;
      margin-top: 0.3rem;
    }
  }
}
</style>
